<template>
    <div class="infinite-list-rd" :class="{hasBotNav:hasBotNav}">
        <slot name="title"></slot>
        <div class="wrapper" ref="wrapper">
            <ul class="prod_box content">
                <li v-for="data in datas">
                    <a href="javascript:;" @click="prodDeatil(data.id)">
                        <div class="moreProdLoadImg">
                            <img v-lazy="data.imgPic" alt="1" class="prod_img">
                        </div>
                        <div class="prod_detail">
                            <div class="prod_top" v-text="data.name"></div>
                            <div class="prod_footer">
                                <span class="zfcolor">
                                    ￥<span class="font16" v-text="data.price"></span>
                                </span>
                                <span class="payNum" v-text="data.payNum"></span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <my-spinner :allLoad='allLoaded'></my-spinner>
    </div>
</template>

<style>
    @import '../assets/css/moreProduct.css'
</style>
<script>
import mySpinner from './mySpinner'
    export default{
        name:'infinite-list',
        // props:['moreProduct'],
        components:{mySpinner},
        data(){
            return{
                count:0,
                moreLoading: false,
                datas:[]
            }
        },
        watch:{
            prodData(){
                this.datas = this.prodData
            }
        },
        props: ['allLoaded', 'prodData','hasBotNav'],
        mounted:function(){
            this.$nextTick(function () {
                window.addEventListener('scroll', this.myScroll)
                this.datas = this.prodData
            })
        },
        created(){
            setTimeout(()=>{
                this.loadMore();
            },20)
        },
        methods:{
            loadMore() {
                if(this.allLoaded || this.moreLoading){
                  return false;
                }
                this.moreLoading = true;
                
                setTimeout(() => {
                    this.$emit('getMoreData')
                    this.datas = this.datas.concat(this.prodData)
                    this.moreLoading = this.allLoaded;
                }, 2000)
            },
            myScroll () {
                if(this.getScrollTop() + this.getWindowHeight() + 150 > this.getScrollHeight()){
                    this.loadMore();
                }
            },
            getScrollTop(){
            　　let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            　　if(document.body){
            　　　　bodyScrollTop = document.body.scrollTop;
            　　}
            　　if(document.documentElement){
            　　　　documentScrollTop = document.documentElement.scrollTop;
            　　}
            　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            　　return scrollTop;
            },
            getScrollHeight(){
            　　let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            　　if(document.body){
            　　　　bodyScrollHeight = document.body.scrollHeight;
            　　}
            　　if(document.documentElement){
            　　　　documentScrollHeight = document.documentElement.scrollHeight;
            　　}
            　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            　　return scrollHeight;
            },
            getWindowHeight(){
            　　let windowHeight = 0;
            　　if(document.compatMode == "CSS1Compat"){
            　　　　windowHeight = document.documentElement.clientHeight;
            　　}else{
            　　　　windowHeight = document.body.clientHeight;
            　　}
            　　return windowHeight;
            },
            prodDeatil(prodId){
                this.$router.push({name:'ProdDetailView',params:{prodId:prodId}})
            }
        }
    }

</script>